  <template>
  <div class="modal-from">
    <a-modal
      title="新增"
      :width="1400"
      style="top: 50px"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="submit"
      @cancel="handleCancel"
    >
      <a-spin :spinning="spinning">
        <div class="layout">
          <div style="flex: 2; padding-right: 30px">
            <!-- <div class="v-form-title">客户资料</div> -->
            <a-row :gutter="24">
              <a-col :md="6" :sm="24">
                <a-form :form="form" layout="vertical" class="input-search">
                  <a-form-item label="联系号码" :wrapperCol="wrapperCol" has-feedback>
                    <a-input-search
                      @search="searchCustomer('tel')"
                      enter-button
                      :maxLength="11"
                      :disabled="disabled_search"
                      ref="phoneInput"
                      style="width: 100%"
                      placeholder="请输入联系号码"
                      v-decorator="[
                        'customerContact.contactContent',
                        { rules: [{ required: true, message: '请输入联系号码！' }] },
                      ]"
                    />
                  </a-form-item>
                </a-form>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form :form="form" layout="vertical">
                  <a-form-item label="联系方式" :wrapperCol="wrapperCol" has-feedback>
                    <a-select
                      allow-clear
                      style="width: 100%"
                      v-decorator="[
                        'customerContact.contactType',
                        { rules: [{ required: true, message: '请选择联系方式！' }] },
                      ]"
                      :disabled="disabled"
                      placeholder="请选择联系方式"
                    >
                      <a-select-option
                        v-for="(item, index) in CustomerConsult.contactDetails"
                        :key="index"
                        :value="item.id"
                        >{{ item.name }}</a-select-option
                      >
                    </a-select>
                  </a-form-item>
                </a-form>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form :form="form" layout="vertical">
                  <a-form-item label="客户姓名" :wrapperCol="wrapperCol" has-feedback>
                    <a-input
                      :disabled="disabled"
                      ref="nameInput"
                      placeholder="请输入客户姓名"
                      style="width: 100%"
                      v-decorator="['customer.name', { rules: [{ required: true, message: '请输入客户姓名！' }] }]"
                    />
                  </a-form-item>
                </a-form>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form :form="form" layout="vertical">
                  <a-form-item label="客户卡号" :wrapperCol="wrapperCol" has-feedback>
                    <a-input
                      ref="cardNoInput"
                      :disabled="true"
                      v-decorator="['customer.cardNo']"
                      placeholder="请输入客户卡号"
                    />
                  </a-form-item>
                </a-form>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col :md="6" :sm="24">
                <a-form :form="form" layout="vertical">
                  <a-form-item label="区域来源" :wrapperCol="wrapperCol" has-feedback>
                    <a-cascader
                      expand-trigger="hover"
                      :disabled="disabled_area_source"
                      :show-search="{ filter }"
                      :options="area"
                      v-decorator="['customer.areaId', { rules: [{ required: true, message: '请选择区域来源！' }] }]"
                      placeholder="选择，可搜索"
                    />
                  </a-form-item>
                </a-form>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form :form="form" layout="vertical">
                  <a-form-item label="信息来源" :wrapperCol="wrapperCol" has-feedback>
                    <a-cascader
                      allow-clear
                      :disabled="disabled_info_source"
                      :options="infoSource"
                      expand-trigger="hover"
                      :show-search="{ filter }"
                      v-decorator="[
                        'customer.infoSource',
                        { rules: [{ required: true, message: '请选择信息来源！' }] },
                      ]"
                      placeholder="选择，可搜索"
                    />
                  </a-form-item>
                </a-form>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form :form="form" layout="vertical">
                  <a-form-item label="性别" :wrapperCol="wrapperCol" has-feedback>
                    <a-select
                      allow-clear
                      style="width: 100%"
                      placeholder="请选择性别"
                      :disabled="disabled_zixun"
                      v-decorator="['customer.sex', { rules: [{ required: true, message: '请选择性别！' }] }]"
                    >
                      <a-select-option v-for="(item, index) in sex" :key="index" :value="item.id">{{
                        item.name
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-form>
              </a-col>

              <a-col :md="6" :sm="24">
                <a-form :form="form" layout="vertical">
                  <a-form-item label="年龄" :wrapperCol="wrapperCol" has-feedback>
                    <a-input
                      :disabled="disabled_zixun"
                      placeholder="请填写年龄"
                      v-decorator="[
                        'customer.age',
                        { rules: [{ required: false, message: '请填写年龄！' }] },
                      ]"
                    />
                  </a-form-item>
                </a-form>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="6" :sm="24">
                <a-form :form="form" layout="vertical">
                  <a-form-item label="开发员" :wrapperCol="wrapperCol" has-feedback>
                    <a-select
                      allow-clear
                      style="width: 100%"
                      placeholder="暂无"
                      :disabled="true"
                      v-model="customer_response.developerid"
                    >
                      <a-select-option v-for="(item, index) in userLists" :key="index" :value="item.id">{{
                        item.name
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-form>
              </a-col>

              <a-col :md="6" :sm="24">
                <a-form :form="form" layout="vertical">
                  <a-form-item label="所属咨询" :wrapperCol="wrapperCol" has-feedback>
                    <a-select
                      allow-clear
                      style="width: 100%"
                      placeholder="暂无"
                      :disabled="true"
                      v-model="customer_response.consult_man_id"
                    >
                      <a-select-option v-for="(item, index) in userLists" :key="index" :value="item.id">{{
                        item.name
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-form>
              </a-col>
            </a-row>

            <a-tabs @change="getTabs" :activeKey="currentActiveKey">
              <a-tab-pane key="0" tab="咨询资料">
                <a-row :gutter="24" style="margin-top: 20px">
                  <a-col :md="6" :sm="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="刚需状态" :wrapperCol="wrapperCol" has-feedback>
                        <a-select
                          :disabled="disabled_zixun"
                          :showSearch="true"
                          option-filter-prop="children"
                          style="width: 100%"
                          placeholder="请选择,可搜索"
                          v-decorator="[
                            'consultRecord.needState',
                            { rules: [{ required: true, message: '刚需状态！' }] },
                          ]"
                          option-label-prop="label"
                        >
                          <a-select-option
                            v-for="item in needState"
                            :key="item.erp_id"
                            :label="item.NAME"
                            :value="item.erp_id"
                            >{{ item.NAME }}</a-select-option
                          >
                        </a-select>
                      </a-form-item>
                    </a-form>
                  </a-col>

                  <a-col :md="6" :sm="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="咨询工具" :wrapperCol="wrapperCol" has-feedback>
                        <a-select
                          :disabled="disabled_zixun"
                          allow-clear
                          style="width: 100%"
                          placeholder="请选择咨询工具"
                          v-decorator="[
                            'consultRecord.consultTool',
                            { rules: [{ required: true, message: '请选择咨询工具！' }] },
                          ]"
                        >
                          <a-select-option
                            v-for="(item, index) in CustomerConsult.consultTools"
                            :key="index"
                            :value="item.id"
                            >{{ item.name }}</a-select-option
                          >
                        </a-select>
                      </a-form-item>
                    </a-form>
                  </a-col>

                  <a-col :md="6" :sm="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="受理类型" :wrapperCol="wrapperCol" has-feedback>
                        <a-select
                          :disabled="disabled_zixun"
                          allow-clear
                          style="width: 100%"
                          placeholder="请选择受理类型"
                          v-decorator="[
                            'consultRecord.acceptType',
                            { rules: [{ required: true, message: '请选择受理类型！' }] },
                          ]"
                        >
                          <a-select-option v-for="item in acceptanceList" :key="item.erp_id" :value="item.erp_id">{{
                            item.NAME
                          }}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-form>
                  </a-col>

                  <a-col :md="6" :sm="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="项目了解程度" :wrapperCol="wrapperCol" has-feedback>
                        <a-select
                          :disabled="disabled_zixun"
                          allow-clear
                          style="width: 100%"
                          placeholder="请选择项目了解程度"
                          v-decorator="[
                            'consultRecord.projectUnderstanding',
                            { rules: [{ required: true, message: '请选择项目了解程度！' }] },
                          ]"
                        >
                          <a-select-option v-for="item in understandList" :key="item.erp_id" :value="item.erp_id">{{
                            item.NAME
                          }}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-form>
                  </a-col>
                </a-row>

                <a-row>
                  <a-col :span="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="客户诉求描述" :wrapperCol="wrapperCol">
                        <a-textarea
                          :disabled="disabled_zixun"
                          :rows="3"
                          placeholder="客户诉求描述"
                          v-decorator="[
                            'consultRecord.customerAppeal',
                            { rules: [{ required: true, message: '客户诉求描述为空！' }] },
                          ]"
                        >
                        </a-textarea>
                      </a-form-item>
                    </a-form>
                  </a-col>
                </a-row>

                <a-row>
                  <a-col :span="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="方案设计" :wrapperCol="wrapperCol">
                        <a-textarea
                          :disabled="disabled_zixun"
                          :rows="3"
                          placeholder="方案设计"
                          v-decorator="[
                            'consultRecord.conceptualDesign',
                            { rules: [{ required: true, message: '请填写方案设计！' }] },
                          ]"
                        >
                        </a-textarea>
                      </a-form-item>
                    </a-form>
                  </a-col>
                </a-row>
              </a-tab-pane>
              <a-tab-pane key="1" tab="咨询情况">
                <a-row :gutter="24">
                  <a-col :md="6" :sm="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="预约时间" :wrapperCol="wrapperCol" has-feedback>
                        <a-date-picker
                          :disabled="disabled_zixun"
                          :disabled-date="disabledDate"
                          :show-time="{ format: 'HH:mm' }"
                          format="YYYY-MM-DD HH:mm"
                          placeholder="选择预约时间"
                          style="width: 100%"
                          v-decorator="[
                            'consultRecord.orderDate',
                            { rules: [{ required: false, message: '请选择预约时间！' }] },
                          ]"
                        />
                      </a-form-item>
                    </a-form>
                  </a-col>

                  <a-col :md="6" :sm="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="客户搜索关键词" :wrapperCol="wrapperCol" has-feedback>
                        <a-input
                          :disabled="disabled_zixun"
                          placeholder="请输入"
                          v-decorator="[
                            'consultRecord.keyWord',
                            { rules: [{ required: false, message: '请输入客户搜索关键词！' }] },
                          ]"
                        />
                      </a-form-item>
                    </a-form>
                  </a-col>
                  <a-col :md="6" :sm="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="来源网站" :wrapperCol="wrapperCol" has-feedback>
                        <a-input
                          :disabled="disabled_zixun"
                          placeholder="请输入"
                          v-decorator="[
                            'consultRecord.sourceWebsite',
                            { rules: [{ required: false, message: '请输入来源网站！' }] },
                          ]"
                        />
                      </a-form-item>
                    </a-form>
                  </a-col>

                  <a-col :md="6" :sm="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="来院意向" :wrapperCol="wrapperCol" has-feedback>
                        <a-select
                          :disabled="disabled_zixun"
                          allow-clear
                          style="width: 100%"
                          placeholder="请选择来院意向"
                          v-decorator="[
                            'consultRecord.clientIntention',
                            { rules: [{ required: false, message: '请选择来院意向！' }] },
                          ]"
                        >
                          <a-select-option
                            v-for="(item, index) in CustomerConsult.comeHosStatus"
                            :key="index"
                            :value="item.id"
                            >{{ item.name }}</a-select-option
                          >
                        </a-select>
                      </a-form-item>
                    </a-form>
                  </a-col>
                </a-row>

                <a-row :gutter="24">
                  <a-col :md="6" :sm="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="来源地址" :wrapperCol="wrapperCol" has-feedback>
                        <a-input
                          :disabled="disabled_zixun"
                          placeholder="请输入"
                          v-decorator="[
                            'consultRecord.keyWebsite',
                            { rules: [{ required: false, message: '请选择来源地址！' }] },
                          ]"
                        />
                      </a-form-item>
                    </a-form>
                  </a-col>

                  <a-col :md="6" :sm="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="关注活动" :wrapperCol="wrapperCol" has-feedback>
                        <a-select
                          allow-clear
                          style="width: 100%"
                          placeholder="请选择关注活动"
                          :disabled="disabled_zixun"
                          v-decorator="['consultRecord.activitiesConcern', { rules: [{ required: false }] }]"
                        >
                          <a-select-option
                            v-for="item in activityList"
                            :key="item.tb_activity_id"
                            :value="item.tb_activity_id"
                            >{{ item.activity_name }}</a-select-option
                          >
                        </a-select>
                      </a-form-item>
                    </a-form>
                  </a-col>

                  <a-col :md="6" :sm="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="推荐项目" :wrapperCol="wrapperCol" has-feedback>
                        <a-select
                          allow-clear
                          style="width: 100%"
                          placeholder="请选择推荐项目"
                          :disabled="disabled_zixun"
                          v-decorator="['consultRecord.recommendableProjects', { rules: [{ required: false }] }]"
                        >
                          <a-select-option v-for="item in ConsultationAppeal" :key="item.id" :value="item.id">{{
                            item.name
                          }}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-form>
                  </a-col>

                  <a-col :md="6" :sm="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="潜在项目" :wrapperCol="wrapperCol" has-feedback>
                        <a-select
                          allow-clear
                          style="width: 100%"
                          placeholder="请选择潜在项目"
                          :disabled="disabled_zixun"
                          v-decorator="['consultRecord.potentialProjects', { rules: [{ required: false }] }]"
                        >
                          <a-select-option v-for="item in ConsultationAppeal" :key="item.id" :value="item.id">{{
                            item.name
                          }}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-form>
                  </a-col>
                </a-row>

                <a-row :gutter="24">
                  <a-col :md="6" :sm="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="推荐专家" :wrapperCol="wrapperCol" has-feedback>
                        <a-select
                          allow-clear
                          style="width: 100%"
                          placeholder="请选择推荐专家"
                          :disabled="disabled_zixun"
                          v-decorator="['consultRecord.recommendationExperts', { rules: [{ required: false }] }]"
                        >
                          <a-select-option v-for="item in userList" :key="item.userid" :value="item.userid">{{
                            item.name
                          }}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-form>
                  </a-col>

                  <a-col :md="6" :sm="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="方案具体报价" :wrapperCol="wrapperCol">
                        <a-input-number
                          style="width: 78px"
                          :disabled="disabled_zixun"
                          :formatter="(value) => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                          v-model="num1"
                          :min="1"
                        />
                        <span style="margin-left: 5px; margin-right: 8px">至</span>
                        <a-input-number
                          style="width: 78px"
                          :disabled="disabled_zixun"
                          :formatter="(value) => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                          v-model="num2"
                          :min="1"
                        />
                      </a-form-item>
                    </a-form>
                  </a-col>

                  <a-col :span="6">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="担心问题" :wrapperCol="wrapperCol">
                        <a-select
                          :disabled="disabled_zixun"
                          :showSearch="true"
                          option-filter-prop="children"
                          mode="multiple"
                          style="width: 100%"
                          placeholder="请选择,可搜索"
                          v-decorator="['consultRecord.worryProblem']"
                          option-label-prop="label"
                        >
                          <a-select-option
                            v-for="item in warryList"
                            :key="item.erp_id"
                            :label="item.NAME"
                            :value="item.erp_id"
                            >{{ item.NAME }}</a-select-option
                          >
                        </a-select>
                      </a-form-item>
                    </a-form>
                  </a-col>
                </a-row>

                <a-row :gutter="24">
                  <a-col :span="24">
                    <a-form :form="form" layout="vertical">
                      <a-form-item label="其他备注" :wrapperCol="wrapperCol">
                        <a-textarea
                          :disabled="disabled_zixun"
                          :rows="3"
                          placeholder="其他备注"
                          v-decorator="['consultRecord.consultCondition']"
                        >
                        </a-textarea>
                      </a-form-item>
                    </a-form>
                  </a-col>
                </a-row>
              </a-tab-pane>
            </a-tabs>

            <!-- <div class="v-form-title">咨询资料</div> -->

            <!-- <a-row type="flex" align="middle">
        <a-col :span="18">
          <a-form :form="form" layout="vertical">
            <a-form-item label="咨询内容" :wrapperCol="wrapperCol" has-feedback>
              <a-textarea
                :disabled="disabled_zixun"
                :rows="3"
                placeholder="请输入咨询内容"
                v-decorator="['consultRecord.consultCondition', {rules: [{ required: false, message: '请输入咨询内容！' }]}]"
              >
              </a-textarea>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row> -->
            <!--用户模块弹出窗，待优化抽离-->
            <a-modal
              :footer="null"
              title="双击选择客户"
              :width="800"
              :visible="visibleTable"
              :confirmLoading="confirmLoading"
              @ok="handleSubmit"
              @cancel="visibleTable = false"
            >
              <a-table
                :alert="true"
                :columns="columns"
                :data-source="customerDataTable"
                :loading="customerTableLoading"
                :pagination="pagination"
                :rowKey="(record, index) => index"
                @change="handleTableChange"
                :customRow="click"
              >
              </a-table>
            </a-modal>
          </div>
          <div style="flex: 1">
            <a-row :gutter="24" style="">
              <!-- <a-col :span="6">
              <a-form :form="form" layout="vertical">
                <a-form-item label="客户诉求" :wrapperCol="wrapperCol" has-feedback>
                  <a-select
                    :disabled="disabled_zixun"
                    :showSearch="true"
                    option-filter-prop="children"
                    style="width: 100%"
                    mode="multiple"
                    placeholder="请选择,可搜索"
                    v-decorator="['quoteItemList', { rules: [{ required: true, message: '请选择项目！' }] }]"
                    option-label-prop="label"
                  >
                    <a-select-option
                      v-for="item in ConsultationAppeal"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      >{{ item.name }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
              </a-form>
            </a-col> -->

              <a-col :span="24">
                <a-table
                  class="suqiu"
                  style="padding: 0"
                  :scroll="{ y: 200 }"
                  :rowKey="(record, index) => index"
                  size="small"
                  :columns="table1columns"
                  :data-source="table1Data"
                  :pagination="false"
                >
                  <template slot="isMain" slot-scope="text, record">
                    <a-checkbox :checked="record.isMain == 1" @change="isMainChange(record)"> </a-checkbox>
                    <span style="margin-left: 10px" v-if="record.isMain == 1">主诉</span>
                  </template>

                  <template slot="dealCondition" slot-scope="text, record">
                    <a-select
                      allow-clear
                      size="small"
                      style="width: 90px"
                      placeholder="成交意向"
                      v-model="record.dealCondition"
                    >
                      <a-select-option :value="item.erp_id" v-for="(item, index) in dealConditionList" :key="index">
                        {{ item.NAME }}
                      </a-select-option>
                    </a-select>
                  </template>

                  <template slot="option" slot-scope="text, record">
                    <a-popconfirm title="确定删除吗?" @confirm="() => deletMain(record)">
                      <a-button type="danger" size="small">删除</a-button>
                    </a-popconfirm>
                  </template>
                </a-table>
              </a-col>
            </a-row>
            <a-divider style="font-size: 14px">诉求项目</a-divider>
            <a-row :gutter="24" style="">
              <!-- <a-col :span="6">
              <a-form :form="form" layout="vertical">
                <a-form-item label="客户诉求" :wrapperCol="wrapperCol" has-feedback>
                  <a-select
                    :disabled="disabled_zixun"
                    :showSearch="true"
                    option-filter-prop="children"
                    style="width: 100%"
                    mode="multiple"
                    placeholder="请选择,可搜索"
                    v-decorator="['quoteItemList', { rules: [{ required: true, message: '请选择项目！' }] }]"
                    option-label-prop="label"
                  >
                    <a-select-option
                      v-for="item in ConsultationAppeal"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      >{{ item.name }}</a-select-option
                    >
                  </a-select>
                </a-form-item>
              </a-form>
            </a-col> -->

              <a-col :span="24">
                <div style="display: flex; flex-direction: row; align-items: center">
                  <a-input style="width: 150px" v-model="searchName" placeholder="请输入项目名称" />
                  <a-button @click="tofuzzyQuery" type="primary"> 搜索</a-button>
                </div>

                <a-table
                  class="suqiu"
                  style="padding: 0; margin-top: 20px"
                  :scroll="{ y: 500 }"
                  :rowKey="(record, index) => index"
                  size="small"
                  :columns="table2columns"
                  :data-source="table2Data"
                >
                  <template slot="index" slot-scope="text, record">
                    <a-checkbox :checked="record.isSelect" @change="changeSelect(record)"> </a-checkbox>
                    <span style="margin-left:10px">{{record.name}}</span>
                  </template>
                </a-table>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import {
  addNetConsultation,
  getConsulationListByTel,
  getConsultationAppeal,
  getCustomerInfo,
  getClientDemandName,
} from '@/api/modular/main/customer/customerConsultation'
import { getCustomerConsult, getInfoSource } from '@/api/customer/customer'
import areaObj from '@/assets/flowable/js/areaData'
import infoSourceObj from '@/assets/flowable/js/infoSource'
import moment from 'moment'
import { AllHisUser, getAcceptanceType } from '@/api/customer/customer'
import { needState, projectUnderstand, aboutActivity, warryList, getTransactionIntention } from '@/api/customer/common'
import { getZXS } from '@/api/modular/main/customer/customerTriage'
import { removePropertyOfNull } from '@/utils/util.js'

export default {
  data() {
    return {
      tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
      spinning: false,
      currentActiveKey: '0',
      customer_response: {
        developerid: undefined,
        consult_man_id: undefined,
      },
      value: [],
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 },
      },
      sex: [
        { id: '0', name: '男' },
        { id: '1', name: '女' },
      ],
      area: areaObj.areaData, //区域
      infoSource: [], //消息来源
      CustomerConsult: {
        //客户咨询下拉系列
        comeHosStatus: [], //来院意向
        consultTools: [], //咨询工具
        contactDetails: [], //联系方式
      },
      //客户诉求列表
      ConsultationAppeal: [],
      dealConditionList: [],
      acceptanceList: [],
      userLists: [],
      disabled: true,
      disabled_zixun: true,
      disabled_search: false,
      disabled_name: false,
      disabled_card: false,
      disabled_tel: false,
      disabled_age: true,
      disabled_info_source: true,
      disabled_area_source: true,
      visible: false,
      visibleTable: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      customerTableLoading: false,
      pagination: {
        current: 1, //当前页
        pageSize: 10, //当前页数
        total: 0, //总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30'], //这里注意只能是字符串，不能是数字
        showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据
      },
      customerDataTable: [],
      columns: [
        {
          title: '序号',
          customRender: (text, record, index) => (this.pagination.current - 1) * this.pagination.pageSize + (index + 1),
        },
        { title: '姓名', dataIndex: 'name' },
        { title: '卡号', dataIndex: 'cardNo' },
        { title: '开发员', dataIndex: 'developer', customRender: (age) => (age ? age : '无') },
        {
          title: '咨询师',
          dataIndex: 'consultMan',
          customRender: (consultMan) => {
            return consultMan ? consultMan : '无'
          },
        },
        { title: '登记时间', dataIndex: 'recordDate' },
      ],

      needState: [],
      understandList: [],
      activityList: [],
      userList: [],
      num1: 1,
      num2: 1,
      specificQuotation: '1-1',
      warryList: [],

      table1Data: [],
      table1columns: [
        {
          title: '是否主诉',
          dataIndex: 'isMain',
          scopedSlots: {
            customRender: 'isMain',
          },
        },
        {
          title: '咨询项目',
          dataIndex: 'name',
        },
        {
          title: '成交意向',
          dataIndex: 'dealCondition',
          scopedSlots: {
            customRender: 'dealCondition',
          },
        },
        {
          title: '操作',
          dataIndex: 'option',
          scopedSlots: {
            customRender: 'option',
          },
        },
      ],

      selectedRowKeys: [],
      searchName: '',
      table2columns: [
        {
          title: '勾选',
          dataIndex: 'index',
          scopedSlots: {
            customRender: 'index',
          },
        },
        // {
        //   title: '项目名称',
        //   dataIndex: 'name',
        // },
        {
          title: '所属部门',
          dataIndex: 'depart_name',
        },
      ],
      table2Data: [],
      tempTable2Data: [],
    }
  },
  created() {},
  watch: {
    num2(newV, oldV) {
      if (newV) {
        this.num2 = newV
        this.specificQuotation = this.num1 + '-' + this.num2
      } else {
        this.num2 = newV
        this.specificQuotation = this.num1 + '-' + 1
      }
    },
    num1(newV, oldV) {
      if (newV) {
        this.num2 = newV
        this.specificQuotation = this.num1 + '-' + this.num2
      } else {
        this.num2 = newV
        this.specificQuotation = 1 + '-' + this.num2
      }
    },
  },
  methods: {
    tofuzzyQuery() {
      let tempArr = this.fuzzyQuery(this.tempTable2Data, this.searchName)
      if (tempArr.length == 0) {
        this.$message.warning('无此相关项目！')
        this.table2Data = this.tempTable2Data
      } else {
        this.table2Data = tempArr
      }
    },
    fuzzyQuery(list, keyWord) {
      var arr = []
      for (var i = 0; i < list.length; i++) {
        if (list[i].name.indexOf(keyWord) >= 0) {
          arr.push(list[i])
        }
      }
      return arr
    },
    getQuoteItemList(list) {
      let mylist = JSON.parse(JSON.stringify(list))
      mylist.forEach((item) => {
        delete item.isSelect
        delete item.depart_name
        delete item.id
      })
      return mylist
    },
    changeSelect(e) {
      e.isSelect = !e.isSelect
      let data = JSON.parse(JSON.stringify(this.table2Data))
      let list = data.filter((item) => {
        return item.isSelect
      })
      // console.log('list', list)
      if (list.length > 0) {
        let flg = false
        list.forEach((item) => {
          if (item.isMain) {
            flg = true
          }
        })
        if (!flg) {
          list[0].isMain = 1
        }
        this.table1Data = list
      } else {
        this.table1Data = []
      }
    },
    deletMain(row) {
      let tempArr = []
      let list = JSON.parse(JSON.stringify(this.table1Data))
      list.forEach((item) => {
        if (item.id !== row.id) {
          tempArr.push(item)
        }
      })

      this.table2Data.filter((item) => {
        return item.id == row.id
      })[0].isSelect = false

      this.table1Data = tempArr
      if (
        this.table1Data.filter((item) => {
          return item.isMain == 1
        }).length == 0 &&
        this.table1Data.length > 0
      ) {
        this.table1Data[0].isMain = 1
      }
    },
    isMainChange(e) {
      this.table1Data.forEach((item) => {
        item.isMain = 0
      })
      e.isMain = 1
      // console.log(e)
    },

    getTabs(tab, e) {
      // console.log(tab)
      if (tab == '0') {
        this.currentActiveKey = '0'
      }
      if (tab == '1') {
        this.currentActiveKey = '1'
        return
      }
    },
    moment,
    /**
     不可选择以前日期
     * */
    disabledDate(current) {
      // return current
      return current < moment().add(-1, 'd')
    },
    filter(inputValue, path) {
      return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    },
    // 初始化方法
    add() {
      this.table1Data = []
      this.visible = true
      this.confirmLoading = false
      this.disabled_search = false
      this.disabled_area_source = true
      this.disabled_info_source = true
      this.disabled_age = true
      this.disabled = true
      this.disabled_zixun = true
      this.spinning = true
      this.customer_response = {
        developerid: undefined,
        consult_man_id: undefined,
      }
      this.getNeedState()
      this.getInfoSource()
      this.getCustomerConsult()
      this.getConsultationAppeal()
      this.AllHisUser()
      this.getAcceptanceType()
      this.$nextTick(() => {
        this.$refs.phoneInput.focus()
        this.currentActiveKey = '0'
        this.form.resetFields()
      })
      // this.getCustomerFeedback()
    },
    getNeedState() {
      getTransactionIntention().then((res) => {
        this.dealConditionList = res.data
      })
      needState().then((res) => {
        this.needState = res.data
      })
      projectUnderstand().then((res) => {
        this.understandList = res.data
      })
      aboutActivity().then((res) => {
        this.activityList = res.data
      })
      getZXS().then((res) => {
        this.userList = res.userList
      })
      warryList().then((res) => {
        this.warryList = res.data
      })
      getClientDemandName().then((res) => {
        let data = JSON.parse(JSON.stringify(res.rows))
        let tempArr = []
        data.forEach((item1) => {
          item1.children.forEach((item2) => {
            let obj = {}
            obj.id = item2.value
            obj.isSelect = false
            obj.isMain = 0
            obj.depart_name = item1.label
            obj.name = item2.label
            obj.value = item2.value
            tempArr.push(obj)
          })
        })
        // console.log('res', tempArr)
        this.table2Data = tempArr
        this.tempTable2Data = tempArr
        setTimeout(() => {
          this.spinning = false
        }, 1000)
      })
    },

    handleSubmit() {
      console.log('点击弹出窗口确定')
    },
    /**
     表单校验手机号格式
     * */
    validatorPhone(rule, value, callback) {
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!reg.test(value)) {
        callback('11位')
      }
      callback()
    },
    /**
     表单校验年龄
     * */
    validatorAge(rule, value, callback) {
      if (!value) {
        callback()
      }
      if (value > 0 && value < 100) {
        callback()
      }
      callback('年龄必须为1-99')
    },
    /**
     * 受理类型
     */
    getAcceptanceType() {
      getAcceptanceType().then((res) => {
        // console.log('456', res)
        this.acceptanceList = res.data
      })
    },

    /**
     请求信息来源
     * */
    getInfoSource() {
      getInfoSource().then((res) => {
        this.infoSource = res
      })
    },
    /**
     员工接口
     * */
    AllHisUser() {
      AllHisUser().then((res) => {
        this.userLists = res.userList
      })
    },

    /**
     下拉接口集合
     * */
    getCustomerConsult() {
      getCustomerConsult().then((res) => {
        this.CustomerConsult = res
      })
    },
    getConsultationAppeal() {
      getConsultationAppeal().then((res) => {
        this.ConsultationAppeal = res.data
      })
    },
    /**
     判断渲染表格
     * */
    resToRender(res) {
      if (res.code == 200) {
        //搜索不到用户
        if (res.rows.length <= 0) {
          const tel = this.form.getFieldValue('customerContact.contactContent')
          this.form.setFields({
            [`customerContact.contactContent`]: {
              errors: [{ message: '该客户不存在！', field: `customerContact.contactContent` }],
              value: tel,
            },
          })
          this.disabled = false
          this.disabled_zixun = false
          this.disabled_age = false
          this.disabled_info_source = false
          this.disabled_area_source = false
        } else if (res.rows.length == 1) {
          //搜索到一条数据，直接渲染，需要选择点击
          this.getCustomerInfoAndRender({ id: res.rows[0].customerId, tel: res.rows[0].contactContent })
        } else {
          //搜索到用户数据两条以上
          this.visibleTable = true
          this.customerDataTable = res.rows
        }
      }
    },
    /**
     查询客户
     * */
    searchCustomer(type) {
      const tel_value = this.form.getFieldValue('customerContact.contactContent')
      const tel = tel_value ? tel_value.trim() : tel_value
      if (!tel) {
        this.form.setFields({
          [`customerContact.contactContent`]: {
            errors: [{ message: '请填写联系号码！', field: `customerContact.contactContent` }],
          },
        })
        return
      }
      if (type == 'tel') {
        this.form.resetFields()
        this.form.setFieldsValue({
          'customerContact.contactContent': tel,
        })
        getConsulationListByTel(tel).then((res) => {
          this.resToRender(res)
          this.confirmLoading = false
        })
      }
    },
    /**
     提交表单
     * */
    submit() {
      const {
        form: { validateFields },
      } = this
      if (this.table1Data.length == 0) {
        this.$message.warning('请选择诉求项目！')
      } else {
        validateFields((errors, values) => {
          this.confirmLoading = true
          if (errors) {
            console.log('表单检验未通过111', errors, values)
            // this.currentActiveKey = "zxzl1"
            this.$message.warning('请补全咨询信息！')
            this.confirmLoading = false
            return
          }

          // values.quoteItemList = values.quoteItemList

          values.quoteItemList = this.getQuoteItemList(this.table1Data)

          if (values.consultRecord.orderDate) {
            values.consultRecord.orderDate = new Date((moment(values.consultRecord.orderDate))._d).getTime()
            // moment(values.consultRecord.orderDate).format('YYYY-MM-DD HH:mm:ss')
          }
          if (values.customer.infoSource && values.customer.infoSource?.length > 0) {
            values.customer.infoSource = values.customer.infoSource[1]
          } else {
            values.customer.infoSource = this.customer_response.info_source
          }
          if (values.customer.areaId instanceof Array) {
            const len = values.customer.areaId.length
            values.customer.areaId = values.customer.areaId[len - 1]
          } else if (typeof values.customer.areaId == 'undefined') {
            values.customer.areaId = null
          } else {
            values.customer.areaId = this.customer_response.area_id
          }
          // console.log('测试',values)
          // return
          if (values.customer.sex) {
            if (values.customer.sex === '男') {
              values.customer.sex = 0
            }
            if (values.customer.sex === '女') {
              values.customer.sex = 1
            }
          }

          if (this.customer_response) {
            values.customer.customerId = this.customer_response.customerId
          }
          if (this.specificQuotation) {
            values.consultRecord.specificQuotation = this.specificQuotation
          } else {
            delete values.consultRecord.specificQuotation
          }

          if (values.consultRecord.worryProblem && values.consultRecord.worryProblem.length > 0) {
            let str = ''
            let tempArr = values.consultRecord.worryProblem || []
            tempArr.forEach((item) => {
              str = item + ',' + str
            })
            values.consultRecord.worryProblem = str.slice(0, str.length - 1)
          } else {
            delete values.consultRecord.worryProblem
          }

          // 测试
          // this.confirmLoading = false
          // 测试

          values.consultRecord = removePropertyOfNull(values.consultRecord)

          console.log('表单检验通过222', values)
          addNetConsultation(values)
            .then((res) => {
              console.log('提交结果为', res)
              if (res.code == 200) {
                this.$message.success({
                  content: '增加成功',
                  duration: 1,
                  onClose: () => {
                    this.visible = false
                    // this.$parent.getList()
                    this.$parent.$refs.customerNetList.refresh()
                    this.confirmLoading = false
                  },
                })
              } else {
                this.$message.info({
                  content: res.message,
                  duration: 0.3,
                  onClose: () => {
                    this.confirmLoading = false
                  },
                })
              }
            })
            .finally(() => {
              this.confirmLoading = false
            })
        })
      }
    },
    /**
     分页动作监听
     * */
    handleTableChange(pagination) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.queryParam.pageNum = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      // this.getList()
    },
    /**
     表格行点击事件
     * */
    click(record, index) {
      return {
        on: {
          dblclick: () => {
            const customerId = record.customerId
            const contactContent = record.contactContent
            this.getCustomerInfoAndRender({ id: customerId, tel: contactContent })
          },
        },
      }
    },
    handleCancel() {
      this.form.setFields({
        [`customerContact.contactContent`]: {
          value: null,
        },
      })
      this.form.resetFields()
      this.visible = false
    },
    /**
     请求用户资料数据并且渲染页面
     * */
    getCustomerInfoAndRender(params) {
      getCustomerInfo(params).then((res) => {
        console.log('客户信息', res)
        if (res.code == 200) {
          const customerInfo = res.data
          this.customer_response = res.data
          this.form.setFieldsValue({
            'customer.age': customerInfo.age,
            'customer.name': customerInfo.name,
            'customer.cardNo': customerInfo.card_no,
            'customer.areaId': customerInfo.area_id === 0 ? undefined : areaObj.getAreaId(customerInfo.area_id),
            'customer.infoSource':
              customerInfo.info_source === 0
                ? undefined
                : infoSourceObj.getinfoSourceId(this.infoSource, customerInfo.info_source),
            'customer.sex': customerInfo.sex == 1 ? '女' : '男',
            'customerContact.contactType': customerInfo.contact_type,
            'customerContact.contactContent': customerInfo.contact_content,
          })
          this.visibleTable = false
          if (!customerInfo.age || customerInfo.age < 0 || customerInfo.age > 99) {
            this.disabled_age = false
          }
          this.disabled_area_source = customerInfo.area_id == 0 || !customerInfo.area_id ? false : true
          this.disabled_info_source = customerInfo.info_source == 0 || !customerInfo.info_source ? false : true
          this.disabled_search = true
          this.disabled_zixun = false
        } else {
          this.$message.info({
            content: res.message,
            duration: 1,
            onClose: () => {
              this.visibleTable = false
            },
          })
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-table-small > .ant-table-content > .ant-table-body {
  margin: 0;
}
/deep/ .ant-table-placeholder{
  display: none;
}

/deep/ .ant-card-head-title {
  font-weight: bold;
}
/deep/ .ant-page-header-heading-title {
  font-weight: normal;
  font-size: 16px;
}
/deep/ .ant-card-body {
  padding: 24px 12px 0;
}
/deep/ .ant-form-item-control-wrapper {
  width: 100%;
}
/deep/ .ant-form-item {
  margin-bottom: 6px;
}
.layout {
  display: flex;
  flex-direction: row;
}
</style>